<template>
	<view class="container">
		<view class="content"></view>
		<view class="content-box">
			<!-- <image class="user-headimg" :src="userInfo.headimg" mode="aspectFill"></image> -->
			<view class="score">
				<!--scoreAlias这个字段是通过setting/base这个接口然后存vuex中，取出来的潮玩币三个字  -->
				<!-- <h1>— 我的{{scoreAlias}} —</h1> -->
				<view class="score-title">我的晶石</view>
				<view class="score-num">
					<text class="test">总晶石</text>
					<text class="spar">{{userInfo.spar}}</text>
				</view>
				<button class="spar-btn" @click="pay">兑换镇北币</button>
			</view>
		</view>
		<view class="tab-bar">
			<view v-for="(tab, index) in tabs" :key="index" class="tab-item" :class="{ 'active': currentTab === index }"
				@click="switchTab(index)">
				{{ tab.name }}
				<view v-if="currentTab === index" class="tab-underline"></view>
			</view>
		</view>
		<view class="item" v-if="currentTab === 0">
			<view class="title">
				<!-- <text>{{scoreAlias}}明细：</text> -->
				<text>晶石明细：</text>
			</view>
			<view class="list">
				<view class="list-item" v-for="item in list" :key="item.uuid">
					<view class="list-body">
						<view class="action">
							{{item.description}}
						</view>
						<!-- 						<view class="order-number" v-if="item.orderNumber">
							订单号:{{item.orderNumber}}
						</view> -->
						<view class="date-time">
							{{item.createdAt}}
						</view>
					</view>
					<view class="right">
						<text class="red" v-if="item.type">+{{item.value}}</text>
						<text class="gray" v-else>-{{item.value}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="item" v-if="currentTab === 1">
			<rich-text :nodes="html"></rich-text>
		</view>
		<view v-if="!list.length && init" style="height: 60vh;overflow: hidden;">
			<NoData></NoData>
		</view>
		<navigator url="/pages/myScore/buy" v-if="isBuyEnabled">
			<view class="footer safe-area-bottom">
				<view class="footer-button" hover-class="hover">
					<text>充值</text>
				</view>
			</view>
		</navigator>
		<uni-popup ref="popup" type="bottom" borderRadius="30px 30px 0 0">
			<view class="popup_content">
				<view class="popup_top"><i></i></view>
				<view class="popup_title">兑换镇北币</view>
				<view class="economy_name">总晶石</view>
				<view class="economy_value">{{userInfo.spar}}</view>
				<view class="deposit">
					提现金额
				</view>
				<view class="depositList">
					<span v-for="(tag,tIndex) in moneyList" :key="tIndex" class="el-tag"
						:class="activeIndex == tIndex ? 'active' : ''"
						@click="switchDeposit(tIndex,tag.value)">{{tag.name}}</span>
					<input class="uni-input" focus placeholder="请输入数量" v-model="custom" v-show="activeIndex == '4'" />
				</view>
				<view class="conversion">
					兑换说明：10晶石=1镇北币
				</view>
				<view class="foot_btn_group">
					<view class="btn_group">
						<span @click="cancel()">取消</span>
						<span @click="withdraw()">兑换</span>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getScoreRecord
	} from "../../api/user.js";

	export default {
		components: {},
		data() {
			return {
				list: [],
				total: 0,
				page: 1,
				per_page: 20,
				init: false,
				loading: false,
				currentTab: 0, // 默认选中第一个Tab
				tabs: [{
					name: '晶石明细',
				}, {
					name: "晶石说明",
				}],
				moneyList: [{
						name: "全部",
						value: "all"
					},
					{
						name: "10个",
						value: "10"
					},
					{
						name: "50个",
						value: "50"
					},
					{
						name: "100个",
						value: "100"
					},
					{
						name: "输入自定义金额",
						value: "zdy"
					},
				],
				activeIndex: 0, //提现选择的下标
				// 选择的晶石数量
				number: null,
				// 自定义数量
				custom: null,
				html: ``
			};
		},
		computed: {
			userInfo() {
				return this.$store.getters.userInfo;
			},
			setting() {
				return this.$store.getters.setting.score || {};
			},
			isBuyEnabled() {
				return this.setting.is_buy_enabled;
			},
		},
		async onLoad() {
			this.$store.dispatch("getUserInfo");
			uni.showLoading({
				title: "加载中",
			});
			const res = await this.getScoreRecord();
			uni.hideLoading();
			this.init = true;
			this.list.push(...res.data.list);
			this.total = res.data.item_total;
			this.selectById();
			uni.setNavigationBarTitle({
				title: "我的晶石",
			});
		},
		// onReachBottom uniapp中自带的下拉触底之后触发的方法，一般在这可以写下拉触底之后触发分页
		async onReachBottom() {
			if (this.loading) return;
			this.loading = true;
			this.page++;
			const res = await this.getScoreRecord();
			this.loading = false;
			this.list.push(...res.data.list);
		},
		methods: {
			// 规则协议
			selectById() {
				this.$http('/admin-api/selectById', 'GET', {
					id: 7
				}).then(res => {
					this.html = res.content
				})
			},
			// 切换tab
			switchTab(index) {
				this.currentTab = index;
			},
			async getScoreRecord() {
				return await getScoreRecord({
					page_num: this.page,
					per_page: this.per_page,
				});
			},
			pay() {
				this.$refs.popup.open('bottom')
			},
			// 切换选择的提现额度
			switchDeposit(index, value) {
				this.activeIndex = index
				this.number = value
			},
			cancel() {
				this.$refs.popup.close();
			},
			// 点击兑换
			async withdraw() {
				try {
					const res = await this.$http('/admin-api/withdraw/sparTransitionZb_coin', "post", {
						userId: this.userInfo.id,
						sparNum: this.number == 'all' || this.number == null ? this.userInfo.spar : (this
							.number == 'zdy' ? this
							.custom : this.number)
					});

					if (res.code == 200) {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
						this.$refs.popup.close();
						const scoreRecord = await this.getScoreRecord();
						this.init = true;
						this.list.push(...scoreRecord.data.list);
						this.total = scoreRecord.data.item_total;
						this.$store.dispatch("getUserInfo");
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
				} catch (error) {
					console.error("Error:", error);
				}
			},

		},
	};
</script>

<style lang="scss">
	page {}

	.container {
		// height: 100vh;
		// overflow-y: auto;
	}

	.content {
		background: url(../../static/bgColor.png) center/ cover no-repeat;
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: -1;
	}

	.footer {
		// display: none;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		// background-color: #f5f5f5;

		.footer-button {
			margin: 0 auto;
			margin-bottom: 10rpx;
			width: 600rpx;
			height: 86rpx;
			line-height: 86rpx;
			text-align: center;
			font-size: 30rpx;
			font-weight: bold;
			border-radius: 80rpx;
			color: rgb(240, 206, 173);
			border: 3rpx solid rgb(240, 206, 173);
			background-image: -webkit-linear-gradient(-45deg, rgb(69, 51, 27), rgb(20, 15, 6));
			// background-image: -webkit-linear-gradient(0deg, rgb(217, 163, 123), rgb(240, 206, 173), rgb(217, 163, 123));
			// color: #6c2a09;
			font-size: 35rpx;

		}
	}

	.content-box {
		width: 90%;
		margin: 30rpx auto;
		height: 440upx;
		position: relative;
		color: #fff;
		background: url(../../static/scoreBg.png) center/ cover no-repeat;

		.user-headimg {
			width: 86upx;
			height: 86upx;
			border-radius: 50%;
		}

		.score {
			font-size: 30rpx;
			color: #fff;
			margin-top: 16upx;
			width: 90%;
			height: 300rpx;
			position: absolute;
			top: 15%;
			left: 10%;

			.score-title {
				font-size: 45rpx;
				color: #fff;
				font-weight: 600;
			}

			.score-num {
				margin-top: 100rpx;
				font-size: 35rpx;
				color: #fff;

				.test {
					margin-right: 10rpx;
				}

				.spar {
					font-size: 40rpx;
				}
			}

			.spar-btn {
				width: 200rpx;
				height: 80rpx;
				line-height: 80rpx;
				position: absolute;
				right: 10%;
				bottom: 5%;
				background: url("../../static/peopleBar.png") no-repeat center;
				font-size: 30rpx;
				color: #fff;
				border-radius: 20rpx;
				backdrop-filter: blur(15px);
			}
		}
	}

	.tab-bar {
		width: 100%;
		display: flex;
		align-items: center;
		color: #fff;
		justify-content: center;
	}

	.tab-underline {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 120rpx;
		height: 4rpx;
		background-color: #6a0dad;
	}

	.tab-item {
		position: relative;
		padding: 20rpx 80rpx;
		cursor: pointer;
	}

	.tab-item.active {
		font-weight: bold;
		font-size: 35rpx;
	}


	.action {
		font-weight: 100;
		color: #fff;
		font-size: 35rpx;
	}

	.red {
		background: linear-gradient(70deg, rgb(108, 67, 255), rgb(133, 94, 231));
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.gray {
		background: linear-gradient(70deg, #ed2346, #fe6948);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.red,
	.gray {
		font-weight: 500;
	}

	.title {
		margin: 0 30rpx;
		height: 100upx;
		line-height: 70upx;
		font-size: 35upx;
		font-weight: 100;
		position: relative;
		display: flex;
		align-items: center;
		color: #fff;
		// &:after {
		//   content: "";
		//   position: absolute;
		//   left: 0rpx;
		//   width: 3px;
		//   height: 40upx;
		// 	background: linear-gradient(70deg, #ed2346, #fe6948);
		// }
	}

	.item {
		border-radius: 50rpx;
		background-color: rgb(31, 29, 41);
		margin: 20rpx auto;
		width: 90%;
		overflow-y: auto;
		color:white;
		font-size: 33rpx;
		padding:30rpx;
		// border: 1rpx solid #5d4748;
		.item-content{
			margin: 50rpx;
			
		}
	}

	.list {
		margin: 0 24rpx;
		border-radius: 20rpx;
		overflow-y: auto;
	}

	.list-item {
		display: flex;
		padding: 24rpx 15rpx;
		box-sizing: border-box;
		border-bottom: 3rpx solid rgb(128, 129, 136);

		.order-number {
			font-size: 26rpx;
			margin-top: 6rpx;
		}

		.date-time {
			font-size: 24upx;
			margin-top: 10upx;
			color: rgb(128, 129, 136);
		}
	}

	.list-body {
		flex: 1;
	}

	.right {
		font-size: 40upx;
	}


	.popup_content {
		background-color: #fff;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		text-align: center;
		padding-bottom: 40rpx;

		.popup_top {
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: none;

			i {
				display: inline-block;
				width: 50rpx;
				height: 10rpx;
				background-color: #a5a5a6;
				border-radius: 20rpx;
			}
		}

		.popup_title {
			padding-top: 40rpx;
			color: #6c43ff;
			font-size: 32rpx;
			padding-bottom: 40rpx;
		}

		.economy_name {
			font-size: 28rpx;
			margin-bottom: 20rpx;
		}

		.economy_value {
			font-size: 36rpx;
			font-weight: bold;
		}

		.deposit {
			text-align: left;
			font-size: 28rpx;
			padding: 0 60rpx;
		}

		.depositList {
			padding: 0 60rpx;
			text-align: left;
			display: flex;
			flex-wrap: wrap;
			margin-top: 30rpx;

			.el-tag {
				display: inline-block;
				height: 60rpx;
				line-height: 60rpx;
				padding: 0 36rpx;
				border: 2rpx solid #858585;
				color: #858585;
				border-radius: 10rpx;
				margin-right: 16rpx;
				margin-bottom: 16rpx;
				font-size: 32rpx;
			}

			.active {
				color: #6c43ff;
				border-color: #6c43ff;
			}

			.uni-input {
				width: 310rpx;
				border: 2rpx solid #858585;
				height: 60rpx;
				border-radius: 8rpx;
				padding: 0 30rpx;
				box-sizing: border-box;
			}
		}

		.conversion {
			margin-top: 16rpx;
			margin-bottom: 30rpx;
		}

		.foot_btn_group {
			padding: 0 60rpx;

			.btn_group {
				display: flex;
				height: 80rpx;
				line-height: 80rpx;
				color: #fff;
				font-size: 36rpx;
				font-weight: bold;
				background-image: url(../../static/foot-btn-group-bg.png);
				background-size: 100%;
				background-repeat: no-repeat;

				span {
					flex: 1;
					display: inline-block;
				}
			}

		}
	}
</style>